<script setup>
import router from '@/router';
import { QUESTION } from '@/router/routeMap';
import { formatTime } from '@/assets/js/utils';

const props = defineProps({
  question: Object
})

defineEmits(['clickDelete'])

const onClickQuestion = async () => {
  router.push({ ...QUESTION, params: { questionId: props.question.id } })
  return
}
</script>

<template>
  <div class="item" @click="onClickQuestion">
    <h2 class="content">{{ question.content }}</h2>
    <p class="detail">
      <el-space :size="30">
        <span>发布日期：{{ formatTime(question.createdAt) }}</span>
        <span>阅览人数：{{ question.weight }}</span>
      </el-space>
    </p>
  </div>
</template>

<style lang="sass">

.item
  cursor: pointer
  transition: transform 0.3s ease
  padding: 14px 20px
  border-bottom: thin solid var(--el-border-color-base)
  &:hover .content::before
    width: 100%
  h2
    font-size: 18px
    font-weight: normal
    color: var(--el-text-color-primary)
  .detail
    margin-top: 10px
    font-size: 14px
    color: var(--el-text-color-secondary)
  .content
    width: fit-content
    max-width: 100%
    overflow: hidden
    text-overflow: ellipsis
    white-space: nowrap
    display: inline-block
    position: relative
    &::before
      content: ''
      position: absolute
      bottom: 0
      left: 0
      background-image: linear-gradient(transparent, black)
      height: 1px
      width: 0
      transition: width 0.3s ease
</style>
